<template>
  <div>
    <div>
      <el-form :inline="true" :model="param">
        <el-col :span="6">
          <el-form-item label="备注">
            <el-input @clear="findPrice" v-model="param.remark" placeholder="筛选备注" clearable
                      prefix-icon="el-icon-search"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="findPrice">查询</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <!--    表格-->
    <el-col>
      <el-col :span="14">
        <el-card shadow="never" style="height:550px;">
          <el-table :cell-style="{padding:'0px'}" size="medium " ref="userTable" :data="tableData" :stripe="true"
                    :border="true">
            <el-table-column prop="house" label="收入来源"></el-table-column>
            <el-table-column prop="price" label="收入" align="center">
              <template v-slot="{row}">
                <h4>{{ row.price }} 元</h4>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="收款时间"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="90">
              <template v-slot="{row}">
                <el-button @click="delPrice(row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background :page-sizes="[7]" @current-change="pageChange($event)"
                         :page-size=this.param.size @size-change="sizeChange($event)"
                         layout="total,prev,pager,next,sizes" :total="total" small>
          </el-pagination>
        </el-card>
      </el-col>
      <!--  资金图    -->
      <el-col :span="10" style="padding-left:9px;">
        <el-card shadow="hover" style="height:550px;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="近7天营业额" name="first">
              <div id="main" style="height:500px;width:510px"></div>
            </el-tab-pane>
            <el-tab-pane label="总营业额" name="second">
              <div id="all" style="height:500px;width:520px"></div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-col>

  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {LineChart, BarChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import {TitleComponent, TooltipComponent, GridComponent, LegendComponent} from 'echarts/components';

import Api from "@/utils/api";

echarts.use([GridComponent, LineChart, BarChart, CanvasRenderer, UniversalTransition, TitleComponent, TooltipComponent, LegendComponent]);

export default {
  name: "Fund",
  data() {
    return {
      tableData: [],
      activeName: 'first',
      total: 0,
      param: {
        remark: '',
        page: 1,
        size: 7,
      },
      sevenDays: [],
      daysPrice: [],
      priceNum: [],
      allData: [],  //销售总额的 数据
    }
  },
  created() {

  },
  mounted() {
    this.find7days()
    this.findPrice();
    this.getAllPrice()
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
    // this.init()  //此时获取数据导致ECharts渲染的时候数据还没完整渲染失败
  },
  methods: {
    findPrice() {
      Api.getPrice(this.param).then(res => {
        this.tableData = res.list;
        this.total = res.total;
      }).catch(e => console.log(e));
    },
    find7days() {
      //异步获取动态数据方法和对应的ECharts动态赋值,重新渲染操作
      return new Promise((resolve, reject) =>{
        Api.get7days().then(res => {
          //得到近7天日期数据   //freeze冻结数据可提升性能
          this.sevenDays = Object.freeze(res.map(item => (item.clickDate)))
          //近七天的每日收金额
          this.daysPrice = Object.freeze(res.map(i => (i.salesSum)))
          //近七天的消费笔数
          this.priceNum = res.map(i => (i.orderCount))
          console.log(res)
        }).then(res =>{
          resolve(res);
          this.init()    //获取数据成功后 渲染
          // console.log(res)
        }).catch(err => {
          reject(err)
        })
      })

    },
    handleClick(tab) {
      if (tab.index === '1') {
        // console.log(tab.index)
        this.initAll()
      } else {
        this.init()
      }
    },
    init() {
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      myChart.resize();
      let option;
      option = {
        title: {
          show: true,
          text: '上周营业额',
          textStyle: {
            align: 'center',
            fontSize: 15
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'cross'},
          align: 'center'
        },
        legend: {
          data: ['收益', '订单数']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data : this.sevenDays
          }
        ],
        yAxis: [{
            type: 'value',
            name: '收益',
            scale: true,  //纵坐标自适应
            position: 'left',
            axisLabel: {
              formatter: '{value}元'
            }
          },
          {
            type: 'value',
            name: '订单数',
            min: 0,
            max: 100,
            position: 'right',
            axisLabel: {
              formatter: '{value}笔'
            }
          }],
        series: [
          {
            name: '收益',
            data: this.daysPrice,
            yAxisIndex: 0,
            type: 'line'
          },
          {
            name: '订单数',
            data: this.priceNum,
            yAxisIndex: 1,
            type: 'line'
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initAll() {
      let allDom = document.getElementById('all');
      let allChart = echarts.init(allDom);
      let option = {
        title: {
          text: '总收益视图',
          textStyle: {
            fontSize: 15
          }
        },
        tooltip: {  // 【根据鼠标移动显示提示，显示更直观】
          trigger: 'axis',
          formatter: "{b} : {c}元"  // 【字符串模板，a、b、c 分别代表不同的含义，详见官网】
        },
        legend: {
          data: ['单品']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: ["茶室", "商品", "总额"]
            // data : this.sevenDays
          }
        ],
        yAxis: {
          type: 'value',
          name: '元',
          scale: true,  //纵坐标自适应
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [{
          name: '单品',
          type: 'bar',
          // data: ['850', '320', '1210']
          data: this.allData
        }]
      };
      option && allChart.setOption(option);
    },
    getAllPrice() {
      this.$axios.get('/api/user/findData').then(res => {
        // console.log(res.data.data)
        let result = res.data.data
        this.allData = [
          result.house_price,
          result.goods_price,
          result.order_price
        ]
      })
    },
    delPrice() {

    },
    pageChange(page) {
      this.param.page = page;
      this.findPrice()
    },
    sizeChange(size) {
      this.param.size = size;
      this.findPrice()
    },
  }

}
</script>

<style scoped>

</style>
